<div class="d-flex bg-white signature" [ngStyle]="{width: w + 'px', height: h + 'px'}">
  <div class="toolbar">
    <div class="d-flex flex-1 align-items-center justify-content-center">
      <a href="javascript:void(0);" style="margin-left: 20px; ">
        <i class="far fa-pencil"></i>
        <span class="ml-1">手绘印章</span>
      </a>
    </div>
    <a href="javascript:void(0);" class="btn-icon" (click)="destroy()">
      <i class="fal fa-window-close"></i>
    </a>
  </div>
  <div class="d-flex flex-1 stamp-wrapper">
    <div class="stamp" *ngFor="let stamp of pdfService.stamps; index as i;" cdkDropList cdkDropListSortingDisabled [cdkDropListConnectedTo]="'viewer'" [cdkDropListData]="pdfService.stamps">
      <div *ngIf="stamp.dragging" class="img-container" [ngStyle]="{width: viewport.width + 'px', height: viewport.height + 'px', backgroundImage: 'url(data:image/png;base64,' + stamp.stampBase64 + ')'}">
      </div>
      <div cdkDrag (cdkDragStarted)="dragStart($event, i)" (cdkDragMoved)="dragMove($event, i);" (cdkDragEnded)="dragEnd($event, i)" class="img-container" [ngStyle]="{backgroundColor: stamp.bg || 'transparent', width: viewport.width + 'px', height: viewport.height + 'px', backgroundImage: 'url(data:image/png;base64,' + stamp.stampBase64 + ')'}">
<!--        <div *cdkDragPreview class="img-container bg-light" [ngStyle]="{width: viewport.width + 'px', height: viewport.height + 'px', backgroundImage: 'url(data:image/png;base64,' + stamp.stampBase64 + ')'}"></div>-->
      </div>
    </div>
  </div>
</div>
